<template>
    <div>这是sum的值：{{ sum }}</div>
    <button @click="addSum">sum+1</button>
 
    <div>姓名:{{ person.name }} 年龄：{{ person.age }}</div>
    <div>{{ fullName }}</div>
    <div>{{ fullName1 }}</div>
    <button @click="changeName">改变姓名</button>
    <button @click="changeAge">改变年龄</button>
    <button @click="changeFullName">改变全名</button>
 
    <ul>
     <li v-for="game,index in games" :key="index">{{ game.name }}</li>
    </ul>
 
    <button @click="changeGameName">改变游戏名字</button>
 </template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, toRefs, watch } from 'vue';

    let sum = ref(1);
    let person = ref({name:'王博',age:35})
    let games = reactive([{name:'三国志',num:1111},{name:'三国杀',num:222}])
    let animal = reactive({name:'dog',weight:12})
    console.log(animal)

    let ranimal = toRefs(animal)
    console.log(ranimal)
    let rname = ranimal.name
    console.log(rname)
    let rrname = toRef(animal)
    console.log(rrname.value.name)


    // console.log(sum)
    // console.log(person)
    

    function addSum(){
        sum.value +=1;
    }

    function changeName(){
        person.value.name="张三丰";
    }

    function changeAge(){
        person.value.age+=1;
    }

    function changeGameName(){
        for(var i=0;i<games.length;i++){
            games[i].name+=1;
        }
    }

    function changeFullName(){
        fullName.value = "哈哈哈哈哈哈哈";
    }

    let fullName = computed({
        get(){
            return person.value.name+":"+person.value.age
        },set(newValue){
            console.log(newValue)
            person.value.name = newValue
        }        
    })

    let fullName1 = computed(()=>{
        return person.value.name+"3434343434"
    })

    let stopWatch  =  watch(sum,(newValue,oldValue)=>{
          console.log(newValue+":"+oldValue)
          if(newValue>10){
            stopWatch()
          }
    })

    watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true})

</script>



<style scoped>
 
</style>
